<script setup lang="ts">
import { getPictureFn } from '@/api/home';
import { onMounted, ref, type Ref } from 'vue';
import type { iPicture } from '@/types/homeType';
import { useRouter } from 'vue-router';

const pictureData: Ref<Array<iPicture>> = ref([])
const router = useRouter()

onMounted(() => {
    getPictureFn().then(res => {
        pictureData.value = res.data.data.data
    })
})

function detailClick() {
    router.push('/detail')
}

</script>

<template>
    <div class="content-show">
        <div class="show" v-for="item in pictureData" :key="item.id" @click="detailClick">
            <img class="picture" :src="item.img">
            <p>{{ item.proname }}</p>
            <div class="userinfo">
                <div style="position: relative;bottom: 7px;">
                    <img class="profile" :src="item.img2" alt="">
                    <span style="position: relative;bottom: 3px;left: 5px;">{{ item.name }}</span>
                </div>
                <div>
                    <span style="height: 20px;line-height: 20px; margin-left: 40px;">
                        <svg t="1731289459825" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6457" width="16" height="16">
                            <path
                                d="M512 832c-156.448 0-296.021333-98.730667-418.410667-291.605333a52.938667 52.938667 0 0 1 0-56.789334C215.978667 290.730667 355.552 192 512 192c156.448 0 296.021333 98.730667 418.410667 291.605333a52.938667 52.938667 0 0 1 0 56.789334C808.021333 733.269333 668.448 832 512 832z m0-576c-129.514667 0-249.461333 83.850667-360.117333 256C262.538667 684.149333 382.485333 768 512 768c129.514667 0 249.461333-83.850667 360.117333-256C761.461333 339.850667 641.514667 256 512 256z m0 405.333333c-83.210667 0-150.666667-66.858667-150.666667-149.333333S428.789333 362.666667 512 362.666667s150.666667 66.858667 150.666667 149.333333S595.210667 661.333333 512 661.333333z m0-64c47.552 0 86.101333-38.208 86.101333-85.333333S559.552 426.666667 512 426.666667c-47.552 0-86.101333 38.208-86.101333 85.333333s38.549333 85.333333 86.101333 85.333333z"
                                fill="#bfbfbf" p-id="6458"></path>
                        </svg><span style="position: relative;bottom: 3px;">1.9万</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.content-show {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .show {
        width: 46%;
        margin-left: 9px;
        margin-top: 10px;
        background-color: white;
        border-radius: 10px;
    }

    p {
        color: #333;
        font-size: 14px;
        padding-left: 5px;
        padding-right: 5px;
        font-weight: bold;
    }

    .userinfo {
        padding: 3px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }

    .picture {
        width: 100%;
        height: 172px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .profile {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
}
</style>